<template>
  <div class="event_details">
    <wback></wback>
    <img src="../assets/activity/top.jpg" />
    <div class="box-big">
      <div>
        <p>活动名称</p>
        <span>Biweekly challenge减脂挑战|赢[时夏]系列徽章</span>
      </div>
      <div>
        <p>活动时间</p>
        <span>2021.07.01 - 2021.07.15</span>
      </div>
      <div>
        <p>活动组别</p>
        <span
          >双周消耗200千卡/双周消耗400千卡/双周消耗800千卡/双周消耗1600千卡</span
        >
      </div>
      <div>
        <p>参与人数</p>
        <span>52368人</span>
      </div>
    </div>
    <div>
      <img src="../assets/activity/xq1.jpg" />
    </div>
    <div class="bottom">
      <a href="javascript:;">马上报名</a>
    </div>
  </div>
</template>

<style>
.event_details {
  background-color: #91f5f5;
  padding-bottom: 50px;
}

/* 头图 */
.event_details img {
  width: 100%;
  display: block;
}
/* 报名信息 */
.event_details .box-big {
  width: 80%;
  overflow: hidden;
  border-radius: 5px;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  background-color: #4ed6d6;
  line-height: 24px;
}

.event_details .box-big > div {
  text-align: left;
  margin-top: 20px;
}
.event_details .box-big > div p {
  font-size: 16px;
  color: #666;
}
.event_details .box-big > div span {
  font-size: 14px;
  color: #fff;
}
/* 报名 */
.event_details .bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #007bff;
}
.event_details .bottom a {
  display: block;
  color: #efefef;
  font-size: 18px;
}
</style>